<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绚丽多彩烟花秀</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            cursor: pointer;
        }

        canvas {
            display: block;
        }

        h1 {
            position: absolute;
            top: 20px;
            color: white;
            font-family: 'Arial', sans-serif;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073;
            }

            to {
                text-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6;
            }
        }
    </style>
</head>

<body>
    <h1>祝您天天开心</h1>
    <canvas id="fireworks"></canvas>

    <script>
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');

        // 设置画布大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 烟花粒子数组
        let particles = [];
        let fireworks = [];

        // 鼠标点击位置
        let mouseX = canvas.width / 2;
        let mouseY = canvas.height / 2;

        // 监听鼠标点击事件
        canvas.addEventListener('click', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
            launchFirework(mouseX, mouseY);
        });

        // 自动发射烟花
        setInterval(() => {
            const x = Math.random() * canvas.width;
            const y = canvas.height;
            const targetY = Math.random() * canvas.height / 2;
            launchFirework(x, targetY);
        }, 800);

        // 发射烟花（从底部发射到目标位置）
        function launchFirework(targetX, targetY) {
            const startX = Math.random() * canvas.width;
            const startY = canvas.height;
            const speed = 2 + Math.random() * 3;

            fireworks.push({
                x: startX,
                y: startY,
                targetX: targetX,
                targetY: targetY,
                speed: speed,
                color: `hsl(${Math.random() * 360}, 100%, 50%)`,
                arrived: false
            });
        }

        // 创建爆炸效果
        function createExplosion(x, y, color) {
            const particleCount = 150;
            const angleIncrement = (Math.PI * 2) / particleCount;
            const power = 5 + Math.random() * 8;
            const hue = parseInt(color.substring(4, color.indexOf(',')));

            for (let i = 0; i < particleCount; i++) {
                const angle = angleIncrement * i;
                const velocity = {
                    x: Math.cos(angle) * Math.random() * power,
                    y: Math.sin(angle) * Math.random() * power
                };

                particles.push({
                    x: x,
                    y: y,
                    velocity: velocity,
                    radius: 2 + Math.random() * 3,
                    color: `hsl(${hue + Math.random() * 30}, 100%, 50%)`,
                    alpha: 1,
                    decay: Math.random() * 0.015 + 0.01,
                    gravity: 0.05 + Math.random() * 0.03
                });
            }
        }

        // 更新和绘制粒子
        function updateParticles() {
            // 清空画布，使用半透明黑色制造拖尾效果
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 更新上升中的烟花
            for (let i = 0; i < fireworks.length; i++) {
                const fw = fireworks[i];

                if (!fw.arrived) {
                    // 计算方向向量
                    const dx = fw.targetX - fw.x;
                    const dy = fw.targetY - fw.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    // 如果接近目标位置，则爆炸
                    if (distance < 5) {
                        fw.arrived = true;
                        createExplosion(fw.x, fw.y, fw.color);
                        fireworks.splice(i, 1);
                        i--;
                        continue;
                    }

                    // 标准化方向向量并乘以速度
                    const vx = (dx / distance) * fw.speed;
                    const vy = (dy / distance) * fw.speed;

                    // 更新位置
                    fw.x += vx;
                    fw.y += vy;

                    // 绘制上升的烟花
                    ctx.beginPath();
                    ctx.arc(fw.x, fw.y, 2, 0, Math.PI * 2);
                    ctx.fillStyle = fw.color;
                    ctx.fill();
                }
            }

            // 更新爆炸后的粒子
            for (let i = 0; i < particles.length; i++) {
                const p = particles[i];

                p.velocity.y += p.gravity;
                p.x += p.velocity.x;
                p.y += p.velocity.y;
                p.alpha -= p.decay;

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = p.color.replace(')', `, ${p.alpha})`).replace('hsl', 'hsla');
                ctx.fill();

                // 移除透明度为0的粒子
                if (p.alpha <= 0) {
                    particles.splice(i, 1);
                    i--;
                }
            }

            requestAnimationFrame(updateParticles);
        }

        // 窗口大小调整时重置画布大小
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        // 开始动画
        updateParticles();
    </script>
</body>

</html>